const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const width = canvas.width;
const height = canvas.height;

const ball = {
    x: width / 2,
    y: height / 2,
    radius: 10,
    vx: 2,
    vy: 2,
    gravity: 0.1,
    friction: 0.99
};

const hexagon = {
    x: width / 2,
    y: height / 2,
    radius: 150,
    sides: 6,
    angle: 0,
    rotationSpeed: 0.01
};

function drawHexagon() {
    ctx.beginPath();
    for (let i = 0; i < hexagon.sides; i++) {
        const angle = (Math.PI * 2 * i / hexagon.sides) + hexagon.angle;
        const x = hexagon.x + hexagon.radius * Math.cos(angle);
        const y = hexagon.y + hexagon.radius * Math.sin(angle);
        if (i === 0) {
            ctx.moveTo(x, y);
        } else {
            ctx.lineTo(x, y);
        }
    }
    ctx.closePath();
    ctx.stroke();
}

function drawBall() {
    ctx.beginPath();
    ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
    ctx.fillStyle = 'blue';
    ctx.fill();
}

function updateBall() {
    ball.vy += ball.gravity;
    ball.vx *= ball.friction;
    ball.vy *= ball.friction;

    ball.x += ball.vx;
    ball.y += ball.vy;

    const hexPoints = [];
    for (let i = 0; i < hexagon.sides; i++) {
        const angle = (Math.PI * 2 * i / hexagon.sides) + hexagon.angle;
        hexPoints.push({
            x: hexagon.x + hexagon.radius * Math.cos(angle),
            y: hexagon.y + hexagon.radius * Math.sin(angle)
        });
    }

    for (let i = 0; i < hexagon.sides; i++) {
        const p1 = hexPoints[i];
        const p2 = hexPoints[(i + 1) % hexagon.sides];
        if (lineCircleCollision(p1, p2, ball)) {
            const normal = { x: p2.y - p1.y, y: p1.x - p2.x };
            const normalLength = Math.sqrt(normal.x * normal.x + normal.y * normal.y);
            normal.x /= normalLength;
            normal.y /= normalLength;

            const dotProduct = (ball.vx * normal.x + ball.vy * normal.y);
            ball.vx -= 2 * dotProduct * normal.x;
            ball.vy -= 2 * dotProduct * normal.y;
        }
    }
}

function lineCircleCollision(p1, p2, circle) {
    const dx = p2.x - p1.x;
    const dy = p2.y - p1.y;
    const length = Math.sqrt(dx * dx + dy * dy);
    const dot = ((circle.x - p1.x) * dx + (circle.y - p1.y) * dy) / (length * length);

    const closestX = p1.x + dot * dx;
    const closestY = p1.y + dot * dy;

    if (!isPointOnLineSegment(p1, p2, closestX, closestY)) {
        return false;
    }

    const distanceX = circle.x - closestX;
    const distanceY = circle.y - closestY;
    const distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);

    return distance <= circle.radius;
}

function isPointOnLineSegment(p1, p2, px, py) {
    const dxc = px - p1.x;
    const dyc = py - p1.y;
    const dxl = p2.x - p1.x;
    const dyl = p2.y - p1.y;

    const cross = dxc * dyl - dyc * dxl;
    if (Math.abs(cross) > 1e-8) return false;

    const dot = dxc * dxl + dyc * dyl;
    if (dot < 0) return false;

    const squaredLength = dxl * dxl + dyl * dyl;
    if (dot > squaredLength) return false;

    return true;
}

function animate() {
    ctx.clearRect(0, 0, width, height);

    hexagon.angle += hexagon.rotationSpeed;
    updateBall();
    drawHexagon();
    drawBall();

    requestAnimationFrame(animate);
}

animate();